<template >
	<view>
		<!-- 公告区 -->
		
		<view class="noticeModule" >
			<view class="noticeLogo"><image src="../../static/index/noticeLogo.png"></image><text>公告</text></view>
			<view class="notice" @click="toNotice()">
				<view>{{notice.title}}</view>
				<view>{{notice.publish_time}}</view>
			</view>
		</view>
		<!-- 主体区域 -->
		<view class="middleModule"> 
			<!-- 按钮组 -->
			<view class="middleIcon">
				<view @click="toPublish()"><image src="../../static/index/publish.png"></image>我的发表</view>
				<view @click="toTalk()"><image src="../../static/index/comment.png"></image>我的评论</view>
				<view class="tab" @click="toAbout()"><image src="../../static/index/about.png"></image>与我相关<text v-show="tabNum>0" class="tabNum">{{tabNum>99?99:tabNum}}<text v-show="tabNum>99">+</text></text></view>
				<view @click="toCollect()"><image src="../../static/index/collect.png"></image>我的收藏</view>
			</view>
			<!-- 帖子区域 -->
			<view>
				<view class="topicTitle"><!-- <text>|</text> --><text>热门话题</text></view>
				<!-- 循环区域 -->
				<template v-if="topicList.length>0">
				<view class="topicBox">
				<view class="topicList" @click="topicDetails(index)" v-for="(data,index) in topicList" :key='index'>
						<view>{{data.title}}</view>
						<view>{{data.content}}</view>
						<view>
							<view><image src="../../static/index/look.png"></image><text>{{data.reads}}</text></view>
							<view><image src="../../static/index/talk.png"></image><text>{{data.commentSum}}</text></view>
							<view><image src="../../static/index/time.png"></image><text>{{data.time}}</text></view>
						</view>
					</view>
				</view>
				</template>
				<template v-else>
					<no-thing style="height: 45vh;"></no-thing>
				</template>
			</view> 
		</view>
		<loadMore :loadtext="loadtext"></loadMore>
	</view>
</template>

<script>
	import User from '../../common/user.js'
	import noThing from"../../components/common/no-thing.vue"
	import loadMore from "../../components/common/load-more.vue"
	export default {
		components: {
			loadMore,
			noThing				
		},
		data() {
			return {
				notice:{},
				topicList:[],
			    loadtext:"上拉加载更多",
				pagenum:1,
				tabNum:0,
				savedFilePath:'',
				version:""
			};
		},
		created() {
			this.User.isCont();
			this.listener();
		},
		onReady() {
		this.isToken();
		this.update();
		},
		onLoad() {
			console.log(this.$u.config.v);
		},
		
		onPullDownRefresh(){
			console.log("下拉刷新啦");
			this.isToken();
			// this.getTopic();
			// this.getNotice();
			this.pagenum=1;
			setTimeout(function(){
			            uni.stopPullDownRefresh();
			        }, 1000);
		},
		methods:{
			//检查更新
			update(){
				console.log(plus.runtime.version,plus.runtime.appid);
				plus.runtime.getProperty(plus.runtime.appid,(e)=>{
					this.version = e.version;
					var server = this.confige.webUrl+"/update"; //检查更新地址
					var req = { //升级检测数据  
					    "appid":plus.runtime.appid,  
						"version":this.version
					};  
					uni.request({  
					    url: server,  
					    data: req,
					    success: (res) => {  
							console.log(res);
							if( res.data.result[0].wgtUrl){
								this.system.updated = true;
								console.log(this.system.updated)
								uni.showModal({
									title:"更新提示",
									content:"检测到应用有小版本更新，请前往设置页更新",
									showCancel:false,
									success: (res) => {
									}
								})
							}
						 	else if( res.data.result[0].pkgUrl){
								this.system.updated = true;
								console.log(this.system.updated)
								var pakurl = res.data.result[0].pkgUrl;
								uni.showModal({
									title:"更新提示",
									content:"检测到应用有大版本更新，请前往下载安装包并重新启动应用",
									showCancel:false,
									success: (res) => {
										if(res.confirm){
											plus.runtime.openURL(pakurl);
											plus.runtime.quit();
										}
									}
								})
							}
							else {
								console.log(22)
								this.system.updated = false;
							}
					    }  
					})
				});
				 
			},
			fileSave(){
				uni.saveFile({
					tempFilePath:"../../static/music/tishiyin.mp3",
					success: (res) => {
						console.log(res)
						this.savedFilePath = res.savedFilePath;
					}
				})
			},
			aa(){
				plus.device.vibrate(100);
				// const innerAudioContext = uni.createInnerAudioContext();
				// innerAudioContext.autoplay = true;
				// innerAudioContext.src = 'http://localhost/static/music/tishiyin.mp3';
				// innerAudioContext.onPlay(() => {
				//   console.log('开始播放');
				// });
			},
			listener(){
				this.tabNum = uni.getStorageSync('tabNum'+this.User.userInfo.id);
				//监听WebSocket接受到服务器的消息事件。
				uni.onSocketMessage((res) => {
					let data = JSON.parse(res.data)
					this.msg = res.data;
					console.log(data)
					if(data.push){
						console.log(this.tabNum);
						let num = data.push.length;
						this.tabNum =Number(this.tabNum)+Number(num);
						console.log(num);
						console.log(this.tabNum);
						uni.setStorageSync('tabNum'+this.User.userInfo.id, this.tabNum);
						this.aa();
						// console.log(data.push)
					}
					else if(data.code==401){
						uni.showModal({
							showCancel:false,
							title:"提示",
							content:data.message
						})
						this.User.isConnnect = false;
						 uni.removeStorageSync('isConnnect'+this.User.userInfo.id);
						 this.User.token = false;
						 uni.removeStorageSync('token');
						// console.log(this.isConnnect)
						uni.redirectTo({
							url: "../userLogin/userLogin"
						});
					 uni.closeSocket()
					}
				})
			},
			//验证token
			isToken(){
			    uni.request({
					url:this.confige.webUrl+"/updToken",
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						// console.log(res)
						if(res.data.code == 401){
							uni.showToast({
								title:"登录已失效，请重新登录",
								icon:"none"
							});
							uni.redirectTo({
								url: "../userLogin/userLogin"
							});
							// let t = "";
							// uni.setStorageSync('token',t);
							this.User.token = false;
							uni.removeStorageSync('token');
							this.User.isConnnect = false;
							uni.setStorageSync('isConnnect'+this.userInfo.id, this.isConnnect);
							
						} 
						if(res.data.code == 200){
							let token = res.data.result[0].newToken
							uni.setStorageSync('token',token);
							this.User.token = token;
							this.User.userInfo=res.data.result[0].user;
							this.User.userRight=res.data.result[0].role;
							let userInfo = res.data.result[0].user;
							let userRight = res.data.result[0].role;
							uni.setStorageSync('userInfo', userInfo);
							uni.setStorageSync('userRight', userRight);
							this.getTopic();
							//获取公告
							setTimeout(()=>{
								this.getNotice();
							},1)
							
						}
					}
				})
			},
			//获取最新公告
		   getNotice(){
			 // var res = await this.$http({
				// 	url:"/announcement/seleAnnouncement",
				// 	header:{
				// 		'X-Token':this.User.token
				// 	}
				// })
				// console.log(res);
				// this.notice = res.data.result[0];
				// uni.setStorageSync('notice', this.notice);
				this.notice = uni.getStorageInfoSync('notice');
				uni.request({
					url:`${this.confige.webUrl}/announcement/seleAnnouncement`,
					header:{
						'X-Token':this.User.token
					},
					data:{
						
					},
					success: (res) => {
						console.log(res)
						if(!this.User.errToken(res.data.code)){
							return;
						} 
						this.notice = res.data.result[0];
						uni.setStorageSync('notice', this.notice);
					}	
				})
			},
			//查看公告详情
			toNotice(){
				uni.navigateTo({
					url:"./notice-details?title="+this.notice.title+"&content="+this.notice.content+"&time="+this.notice.publish_time
				})
				// uni.reLaunch({
				// 	url:"./notice-details?title="+this.notice.title+"&content="+this.notice.content+"&time="+this.notice.publish_time
				// })
			},
			//获取帖子信息
			getTopic(){ 
				this.topicList="";
			//	console.log(this.User.token)
				uni.request({
			 		url:this.confige.webUrl+"/essay/listEssayByPopular",
					data:{
					pages:1,
					limits:10
					},
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						// console.log(res);
						if(!this.User.errToken(res.data.code)){
							return;
						} 
						let list = res.data.result[0].list;
						this.topicList = list;
						if(this.topicList.length>9){
							this.loadtext ="上拉加载更多";
						}
						else{
							this.loadtext ="没有更多了";
						}
					}	
				})	
			},
			loadmore(){
			   if(this.loadtext!="上拉加载更多"){ return;}
			   this.loadtext="加载中...";	
			   this.pagenum++;
			   setTimeout(() => {
				uni.request({
					url:this.confige.webUrl+"/essay/listEssayByPopular",
					data:{
						limits:10,
						pages:this.pagenum
					},
					header:{
						'X-Token':this.User.token
					},
					success: (res) => {
						// console.log(res)
						if(!this.User.errToken(res.data.code)){
							return;
						} 
						 if(res.data.code==200){
							 let list = res.data.result[0].list;
							 this.topicList.push(...list) ;
							this.loadtext="上拉加载更多"
						 }
						 else{
						 	this.loadtext="没有更多啦"
						     }
					 }	
					}	  
				)}, 1000);
			},
			
			//话题详情
			topicDetails(index){
				uni.navigateTo({
					url:'../indexTopic/topic?id='+this.topicList[index].id
				})
			},
			//我的发表
			toPublish(){
				if(this.User.userRight.name==='livestock'|| this.User.userRight.name==='government'){
					uni.navigateTo({
						url:'../user/userPublish'
					})
				}
				else{
					uni.showToast({
						title:"您无权限发表文章！",
						icon:"none"
					})
				}
				
			},
			// 我的收藏
			toCollect(){
				uni.navigateTo({
					url:'../user/userCollect'
				})
			},
			// 我的评论
			toTalk(){
				uni.navigateTo({
					url:'../user/userTalk'
				})
			},
			// 与我相关
			toAbout(){
				this.tabNum = 0;
				uni.removeStorageSync('tabNum'+this.User.userInfo.id);
				uni.navigateTo({
					url:'../user/userAbout'
				})
			}
		},
		//监听触底事件
		onReachBottom(){
			this.loadmore()
		}
	}
</script>
 
<style lang="less">
@import "../../common/global.less";
page{ background-color: @backcolorthree;}
.noticeLogo{
	display: flex;
	align-items: center;
	padding: 0rpx 10rpx 10rpx 10rpx;
	image{ width: 50rpx; height: 50rpx;}
	text { font-size: 30rpx; padding-left: 5rpx;}
}
.notice{ 
	width:92%;
	border-radius: 40upx;
	height: 280upx;
	margin: auto;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-left: 25upx;
	padding-right: 15upx;
	background-image: url(~@/static/index/background.png);
	background-size: 100%;
 >view{ 
	 }
	>view:nth-of-type(1){
		display: flex;
		justify-content: center;
		align-items: center;
		height: 130rpx; 
		margin-top: 50rpx;
		width: 400rpx;
		padding: 5rpx;
		font-size: 45rpx;
		font-weight:600;
		color:#F9E5CE;
		letter-spacing: 5rpx;
		line-height: 1.5;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		}
	>view:nth-of-type(2){
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #7D81F0;
		font-weight: bold;
		margin-top: 20rpx;
		color: #F2F4FD;
		border-radius: 40rpx;
		padding:5rpx 10rpx ;
		font-size: 28rpx;
		width: 300rpx;
		   }
		}
.topicList{
	height: 180upx;
>view:nth-of-type(1){
	padding-left: 10upx;
	letter-spacing: 4rpx;
	font-size: 32upx; 
	overflow: hidden;
	white-space:nowrap;
    text-overflow: ellipsis;}
	>view:nth-of-type(2){
		padding: 10upx 0upx 0upx 10upx;
		letter-spacing: 6rpx;
		font-size: 28upx; 
		color: #7C7C7C;
		overflow: hidden;
		white-space:nowrap;
	    text-overflow: ellipsis;}
	>view:nth-of-type(3){
		font-size: 30upx;
		width: 96%;
		margin: auto;
		border-bottom: 1px solid #e1e1e1;
		display: flex;
		flex-direction:row;
		justify-content: space-around;
		padding-top: 30upx;
		padding-bottom: 5upx;
		>view{image{width: 35upx; height: 35upx;} text{padding-left: 10upx;color:@fontcolor; line-height: 40upx; display: block; float:right;font-size:@timeSize;}}
		}}
.topicTitle{ 
	padding-left: 10upx;
	width: 98%;
    margin-top: 20upx;
	margin-bottom: 40rpx;
 // >text:nth-of-type(1){ color:#007AFF;font-weight: bold;padding-left: 10upx;}
 >text:nth-of-type(1){ 
	 font-size: 38upx;
	 // padding-left: 10upx;
	 border-bottom: 4rpx solid #4AC997;
	 }
 }
 .topicBox{ width: 100%;margin-top: 20upx; }
.middleIcon{
	height: 170rpx;
	padding-top: 10rpx;
	display:flex;
	justify-content: space-around;align-items: center;
	>view{
		display:flex;
		flex-direction:column;
		justify-content: center;
		font-size:30rpx;	
		font-family: '';
		color:#000000;
	}
	>view>image{padding-bottom: 10upx; height: 90upx; width: 90upx;margin:auto;}
}
.tab{ position: relative;}
.tabNum{ 
	position: absolute;
	height: 35rpx;
	min-width: 35rpx;
	
	color: #FFFFFF;
	background-color: red;
	font-size: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	right: 0;
	margin-top: -10rpx;
	margin-right: -10rpx;
	top: 0;
}
.noticeModule{ height: 360rpx; width: 100%;padding-top: 20upx; background-color:#ffffff;}
.middleModule{margin: auto; width: 96%; height: 100%+150upx;border-radius:20upx 20upx 0 0 ; background-color:@uni-bg-color;margin-top: 20rpx;}

</style>
